<template>
  <a-modal
    v-model:visible="visible"
    @ok="handleOk"
    ok-text="确定"
    cancel-text="取消"
    :title='"用户："+item.mobile +"（ID:"+item.user_id+"）充值"'
  >
    <div>
      <h3></h3>
    </div>
    <a-tabs v-model:activeKey="modelRef.activeKey">
      <a-tab-pane key="balance">
        <template #tab>
          <span> ￥ 可用余额 </span>
        </template>
        <a-form
          ref="formRef"
          :model="modelRef"
          :rules="rulesRef"
          :label-col="labelCol"
          :wrapper-col="wrapperCol" 
          v-if="modelRef.activeKey=='balance'"
        >
          <a-form-item label="可用余额">
            <a>{{ item.balance }}</a>
          </a-form-item>
          <a-form-item label="变动类型" name="balanceChangeType">
            <a-radio-group v-model:value="modelRef.balanceChangeType">
              <a-radio-button value="inc">增加金额</a-radio-button>
              <a-radio-button value="dec">减少金额</a-radio-button>
              <a-radio-button value="final">最终金额</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="变动金额" name="amount">
            <a-input-number v-model:value="modelRef.amount" />
          </a-form-item>
          <a-form-item label="变动说明" name="balanceRemark">
            <a-mentions v-model:value="modelRef.balanceRemark" rows="3" />
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="points">
        <template #tab>
          <span> # 可用积分 </span>
        </template>
        <a-form
          ref="formRef"
          :model="modelRef"
          :rules="rulesRef"
          :label-col="labelCol"
          :wrapper-col="wrapperCol" 
          v-if="modelRef.activeKey=='points'"
        >
          <a-form-item label="可用积分">
            <a>{{ item.points }}</a>
          </a-form-item>
          <a-form-item label="变动类型" name="pointsChangeType">
            <a-radio-group v-model:value="modelRef.pointsChangeType">
              <a-radio-button value="inc">增加积分</a-radio-button>
              <a-radio-button value="dec">减少积分</a-radio-button>
              <a-radio-button value="final">最终积分</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="变动数量" name="quantity">
            <a-input-number v-model:value="modelRef.quantity" />
          </a-form-item>
          <a-form-item label="变动说明" name="pointsRemark">
            <a-mentions v-model:value="modelRef.pointsRemark" rows="3" />
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import { toRefs, reactive,nextTick, defineComponent } from "vue";
import { notice } from "@/config";
import { TreeSelect } from "ant-design-vue";
import { recharge } from "@/api/user/List";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
export default defineComponent({
  setup(props, { emit }) {
    let state = reactive({
      visible: false,
      formRef: {},
      item: {},
    });
    let modelRef = reactive({
      activeKey: "balance",
      user_id: 0,
      amount: "",
      quantity: "",
      balanceChangeType: "inc",
      balanceRemark: "",
      pointsChangeType: "inc",
      pointsRemark: "",
    });
    let rulesRef = reactive({
      amount: [
        {
          required: true,
          message: "请输入变动金额",
        },
      ],
      quantity: [
        {
          required: true,
          message: "请输入变动数量",
        },
      ],
      balanceRemark: {
        required: true,
        message: "请输入变动说明",
      },
      pointsRemark: {
        required: true,
        message: "请输入变动说明",
      },
    });
    // 显示对话框
    const show = (item) => {
      state.item = item;
      state.visible = state.visible ? false : true;
      modelRef.user_id = item.user_id;
      nextTick(() => {
        state.formRef.resetFields()
      })
    };

    const handleOk = () => {
      state.formRef.validate().then(() => {
        recharge(modelRef).then((res) => {
          emit("okCallback", res);
          notice(res.status == 200 ? "success" : "error", res.message);
          state.visible = false;
        });
      });
    };

    return {
      show,
      handleOk,
      ...toRefs(state),
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
      modelRef,
      rulesRef,
      SHOW_PARENT,
    };
  },
});
</script>
